<template>
  <div>		
		<van-nav-bar v-if="isArtificer"  title="评价列表" />
		<van-nav-bar v-else title="评价列表" left-arrow @click-left="$utils.back($route.path)" />
		<van-tabs v-model:active="active"  @change="tabChange" >
			<van-tab :title="item.title" v-for="(item,index) in tabs" :key="index">
				<div v-if="list.length > 0">
					<div  class="bg-white mg-24 pd-24 br-24">
						<valuation :info="list"></valuation>
					</div>
				</div>
				<div v-else>
					<div class="valuation"><img src="@/assets/images/physio/valuation.png" /><span class="tips">暂无评价记录</span>	</div>								
				</div>
			</van-tab>			
		</van-tabs>		
		<tabBar v-if="isArtificer" />
		<van-popup v-model="showTips" :close-on-click-overlay="isclose" class="services">
			<div class="unartificer">
					<div class="fs-28 tac">您不是技师，请联系服务商</div>
					<div class="return" @click="back">确定</div>
			</div>
		</van-popup>
  </div>
</template>
<script>
import valuation from 'components/physio/valuation.vue'
import { GetBookHomeOrderCommentPage,GetArtificerInfo } from 'api/physio'
import tabBar from '../physioArtificer/tabBar.vue'
export default {
  components: {
    valuation,tabBar
  },
  props: {
  },
  data() {
    return {
			id: 0,			
			active:0,
			tabs:[
				{
					title:'全部',
					status:0,
				},
				{
					title:'好评',
					status:1,
				},				
				{
					title:'差评',
					status:2,
				},				
			],
			list: [],
			requestData: {
        PageIndex: 1,
        PageSize: 10,
			},
			isArtificer: false,
			showTips: false,
			isclose: false,
		}
	},
	created(){
		if(this.$route.query.id){
			this.requestData.artificerUserId = this.$route.query.id
			this.GetBookHomeOrderCommentPage()
		}else{
			this.GetArtificerInfo()
		}
	},
	methods:{
		tabChange(e){
			console.log('e',e)
			this.requestData.goodOrBad = e
			this.GetBookHomeOrderCommentPage()
		},
		GetBookHomeOrderCommentPage(){			
			GetBookHomeOrderCommentPage(this.requestData).then(res => {
				if(res.Data){
					this.list = res.Data.Data
					if(this.list.length > 0){
						this.list.forEach((ele) => {
							ele.UserName = this.formattedName(ele.UserName)
						})
					}
				}
			})
		},
		formattedName(val){
			return val.substring(0,1) + new Array(3).join('*')
		},
		GetArtificerInfo(){
			GetArtificerInfo().then(res => {
				if(res){
					if(res.Data.ID === 0 || res.Data.State === 0 || res.Data.State === 3 || res.Data.State === 5){
						this.showTips = true
					}else{
						this.requestData.artificerUserId = res.Data.UserId
						this.GetBookHomeOrderCommentPage()
					}
				}
			})
		},
		back(){
			window.location.href = this.$LocalDomain + '/m/home/union'
		},
	}
}
</script>
<style lang="scss" scoped>
	.valuation{
		margin: 186px 132px 0 132px;
		position: relative;
	}
	.tips{
		position: absolute;
		top: 266px;
		left: 168px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
	}
	/deep/.van-tab--active{
		color:#24c373;
	}
	/deep/.van-tabs__line {
		background:#24c373;
	}
	.unartificer{
		background: #fff;
		padding: 24px;
	}
	.services{
		width: 60%;
		border-radius: 12px;
	}
	.return{
		width: 200px;
		font-size: 28px;
    background: #24c373;
    text-align: center;
    height: 60px;
    line-height: 60px;
    border-radius: 12px;
    color: #fff;
    margin: 24px auto 0;
	}
</style>
